<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="description" content="Sign up">
    <meta name="author" content="Hone-too-young">
    <title>重邮失物招领检索注册</title>
    <link rel="shortcut icon" th:href="@{/ChongYouIcon.ico}" type="image/x-icon"/>
    <link rel="bookmark" th:href="@{/ChongYouIcon.ico}" type="image/x-icon"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- custom styles for this template -->
    <link th:href="@{/css/signin.css}" rel="stylesheet">

</head>

<body class="text-center">
<script>
    function check(){
        var username=document.getElementById("usn");
        var length=username.value.length;
        if(length<2||length>16){
            nameError();
        }
        else{
            var error=document.getElementById("nameError");
            error.style.color="green";
            error.style.textAlign="center"
            error.innerHTML="<img src='img/correct.jpg' width='20' height='20'>"
        }
    }
    function checkpswd(){
        var pswd=document.getElementById("pswd");
        var length=pswd.value.length;
        if(length<6||length>=16){
            var error=document.getElementById("psdError");
            error.style.color="red";
            error.style.textAlign="left";
            error.innerHTML="<img src='img/exclaim.jpg' width='20' height='20'>6~16 characters long"
        }
        else{
            var error=document.getElementById("psdError");
            error.style.color="green";
            error.style.textAlign="center"
            error.innerHTML="<img src='img/correct.jpg' width='20' height='20'>"
        }
    }
    function checkpswd2(){
        var pswd=document.getElementById("pswd");
        var ckpswd=document.getElementById("ckpswd");
        var error=document.getElementById("ckpsdError");
        if(pswd.value!=ckpswd.value){
            error.style.color="red";
            error.style.textAlign="left";
            error.innerHTML="<img src='img/exclaim.jpg' width='20' height='20'>password illegal"
        }
        else{
            error.style.color="green";
            error.style.textAlign="center"
            error.innerHTML="<img src='img/correct.jpg' width='20' height='20'>"
        }
    }
    function nameError(){
        var error=document.getElementById("nameError");
        error.style.color="red";
        error.style.textAlign="left";
        error.innerHTML="<img src='img/exclaim.jpg' width='20' height='20'>username illegal"
    }
</script>
<div>
    <h1 class="vintage">Lost And Found Internet</h1>
    <br>
    <form class="form-signin" th:action="@{/user/signup}" method="post">
        <img class="mb-4" th:src="@{/img/ChongYouIcon2.ico}" alt="" width="80" height="80">
        <h1 class="h3 mb-3 font-weight-normal ">Sign up</h1>
        <label class="sr-only" >StudentNo</label>
        <input type="text" class="form-control" placeholder="StudentNo" required="" autofocus=""  id="stuno" name="studentNo" onkeyup="check()">
        <label class="sr-only" >Institute</label>
        <input type="text" class="form-control" placeholder="Institute" required="" autofocus=""  id="ins" name="institute" onkeyup="check()">
        <label class="sr-only" >Grade</label>
        <input type="text" class="form-control" placeholder="Grade" required="" autofocus=""  id="gra" name="grade" onkeyup="check()">
        <label class="sr-only" >Class</label>
        <input type="text" class="form-control" placeholder="Class" required="" autofocus=""  id="cla" name="clazz" onkeyup="check()">
        <label class="sr-only" >RealName</label>
        <input type="text" class="form-control" placeholder="RealName" required="" autofocus=""  id="rname" name="name" onkeyup="check()">
        <label class="sr-only" >Username</label>
        <input type="text" class="form-control" placeholder="Username" required="" autofocus=""  id="usn" name="username" onkeyup="check()"><div id="nameError" style="text-align: left"></div>
        <label class="sr-only">New Password</label>
        <input type="password" class="form-control" placeholder="New Password" required="" autofocus="" id="pswd" name="password" onkeyup="checkpswd()"><div id="psdError" ></div>
        <label class="sr-only">Confirm New Password</label>
        <input type="password" class="form-control" placeholder="Confirm New Password" required="" id="ckpswd" name="" onkeyup="checkpswd2()"><div id="ckpsdError" style="text-align: left"></div>
        <div style="display: flex">
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>
            <input style="margin-left: 20px" class="btn btn-default" type="button" value="back" onclick="window.history.back()">
        </div>

        <p class="mt-5 mb-3 text-muted">2021-2022</p>
        <a class="btn btn-sm">中文</a>
        <a class="btn btn-sm">English</a>
    </form>
</div>
</body>
</html>